<template>
   <div class="banner">
       <h4>Banner管理</h4>
       <div class="container" style="">
             <div class="filter-box" style="margin-bottom:20px;">
                <div>
                    <el-button  type="primary"   size="mini" @click="addBanner()">
                            新增banner</el-button>
                 </div>
             </div>
             <div class="table-box" style="padding:20px;border:1px solid #ddd;">
               <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column prop="title" label="标题" width="100" align="center"></el-table-column>
                    <el-table-column prop="realName" label="轮播图" width="220" align="center">
                         <template slot-scope="scope">
                               <img :src="scope.row.url"
                                alt="" width="140" height="50">                          
                        </template>
                    </el-table-column>
                    <el-table-column prop="link" label="链接" width="200" align="center"></el-table-column>
                    <el-table-column prop="effectiveTime" label="有效期" align="center"  width="200">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" align="center" width="120">
                         <template slot-scope="scope">
                             <el-switch  v-model="scope.row.state"  @click.native="forbidden(scope.row.id,scope.row.state)">
                            </el-switch>                       
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleDetail( scope.row.id )">详情</el-button>  
                                <el-button size="mini" type="warning" @click="handleEdit( scope.row.id )">编辑</el-button> 
                                <el-button size="mini" type="danger" @click="handleDelBanner(scope.row.id)">删除</el-button>                          
                            </template>
                   </el-table-column>
               </el-table> 
             </div>
              <div class="pagination" style="margin-bottom:0px;">
                    <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;">
                    </el-pagination>
              </div>
      </div>
  </div>  
</template>

<script>
import { bannerList,delBanner,updateBannerStatus } from '@/request/api'
export default {
    data(){
        return {
            loading:true,
            data: [],
            value: '',
            input2:'',
            total:0
      
        }
    },
    created(){
        this.getBannerList();
       
    },
    methods:{
      formatter(row, column){
        return row.address
      },
      addBanner(){
          this.$router.push({
              path:'/banner/addBanner'
          })
      },
      handleDelBanner(id){
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delBanner({
                 id:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getBannerList()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
      getBannerList(){
          bannerList({
              pageNum:1,
              pageSize:10
          }).then(res => {
               this.total = res.total;
               this.data = res.rows;
               this.loading = false;
          })
      },
      forbidden(id,status) {
          console.log(status);
          status = !status;
         let info = status  ? '确认要关闭banner吗':'确认要启用banner吗'
         let msg = status   ? '关闭成功':'启用成功!'
         let cancelMsg = status  ?'已取消关闭!':'已取消启用!'
         this.$confirm(info, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             updateBannerStatus({
                 id:id
             }).then(res=> {
                 if(res.code == 1) {
                      this.$message({
                        type: 'success',
                        message: msg
                     });
                      this.getBannerList()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: cancelMsg
              });  
              this.getBannerList()
         }) 
      },
      handleEdit(id) { // 编辑页面 
         this.$router.push({
             path:`/banner/update_banner/${id}`
         }) 
      },
      handleDetail(id) {
          this.$router.push({
              path:`/banner/detail_banner/${id}`
          })
      }
    }
 }
</script>
<style  scoped>
.banner {
        width:100%;
        height: 100%;
}
.banner h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>